import { Scatter } from '@antv/g2plot';
import { useEffect } from 'react';
const data = [
  { type: '冰箱', year: '一月', value: 1100 },
  { type: '冰箱', year: '二月', value: 1500 },
  { type: '冰箱', year: '三月', value: 1250 },
  { type: '冰箱', year: '四月', value: 1405 },
  { type: '冰箱', year: '五月', value: 1565 },
  { type: '冰箱', year: '六月', value: 1370 },

  { type: '热水器', year: '一月', value: 890 },
  { type: '热水器', year: '二月', value: 1000 },
  { type: '热水器', year: '三月', value: 1050 },
  { type: '热水器', year: '四月', value: 1045 },
  { type: '热水器', year: '五月', value: 800 },
  { type: '热水器', year: '六月', value: 980 },

  { type: '空调', year: '一月', value: 810 },
  { type: '空调', year: '二月', value: 730 },
  { type: '空调', year: '三月', value: 1090 },
  { type: '空调', year: '四月', value: 1900 },
  { type: '空调', year: '五月', value: 1200 },
  { type: '空调', year: '六月', value: 900 },
];

const CompareScatterChartsDemo = () => {
  useEffect(() => {
    const scatterPlot = new Scatter('container1', {
      title: {
        visible: true,
        text: '订单总数量',
      },

      data: data,
      meta: {
        year: {
          alias: '月份',
        },
        value: {
          alias: '数量',
          formatter: (v) => {
            return `${v}个`;
          },
        },
      },
      xField: 'year',
      yField: 'value',

      stackField: 'type',

      colorField: 'type',
      color: ['#d62728', '#2ca02c', '#000000'],
      pointSize: 5,
      pointStyle: {
        fillOpacity: 1,
      },
      yAxis: {
        visible: true,
        min: 0,
      },
      label: {
        visible: true,
      },
    });
    scatterPlot.render();
  }, []);
  return <div id="container1"></div>;
};
export default CompareScatterChartsDemo;
